<!DOCTYPE html>
<html>

<head>
    <!-- bower:css -->
    <link rel="stylesheet" href="../../bower_components/colorbox/example1/colorbox.css" />
    <link rel="stylesheet" href="../../bower_components/swipebox/src/css/swipebox.min.css" />
    <link rel="stylesheet" href="../../dist/css/justifiedGallery.css" />
    <!-- endbower -->
</head>

<body>
    <h1>Infinite scroll test</h1>
    <p>This test check the infinite scroll with local images</p>
    <div><button id="enableDisableTextSignal">Enable/Disable text signal</button></div>
    </p>
    <div id="gallery">
        <a href="../photos/8083451788_552becfbc7_b.jpg" title="What's your destination?">
            <img src="../photos/8083451788_552becfbc7_m.jpg" width="240" height="198" />
        </a>
        <a href="../photos/7948632554_01f6ae6b6f_b.jpg" title="Just in a dream Place">
            <img src="../photos/7948632554_01f6ae6b6f_m.jpg" width="240" height="160" />
        </a>
        <a href="../photos/7302459122_19fa1d8223_b.jpg" title="Truthful Innocence">
            <img src="../photos/7302459122_19fa1d8223_m.jpg" width="240" height="160" />
        </a>
        <a href="../photos/7222046648_5bf70e893a_b.jpg" title="Simply my Brother">
            <img src="../photos/7222046648_5bf70e893a_m.jpg" width="240" height="125" />
        </a>
        <a href="../photos/7002395006_29fdc85f7a_b.jpg" title="Freedom">
            <img src="../photos/7002395006_29fdc85f7a_m.jpg" width="240" height="132" />
        </a>
        <a href="../photos/7062575651_b23918b11a_b.jpg" title="Maybe spring">
            <img src="../photos/7062575651_b23918b11a_m.jpg" width="240" height="132" />
        </a>
        <a href="../photos/6841267340_855273fd7e_b.jpg" title="Love">
            <img src="../photos/6841267340_855273fd7e_m.jpg" width="240" height="137" />
        </a>
    </div>
    
    <!-- bower:js -->
    <script src="../../bower_components/jquery/dist/jquery.js"></script>
    <script src="../../bower_components/colorbox/jquery.colorbox.js"></script>
    <script src="../../bower_components/swipebox/src/js/jquery.swipebox.min.js"></script>
    <script src="../../dist/js/jquery.justifiedGallery.js"></script>
    <!-- endbower -->
    <script>
        availableImgs = [
             { desc : "What's your destination?", src : "../photos/8083451788_552becfbc7_m.jpg" },
             { desc : "Just in a dream Place", src : "../photos/7948632554_01f6ae6b6f_m.jpg" },
             { desc : "Truthful Innocence", src : "../photos/7302459122_19fa1d8223_m.jpg" },
             { desc : "Simply my Brother", src : "../photos/7222046648_5bf70e893a_m.jpg" },
             { desc : "Freedom", src : "../photos/7002395006_29fdc85f7a_m.jpg" },
             { desc : "Maybe spring", src : "../photos/7062575651_b23918b11a_m.jpg" },
             { desc : "Love", src : "../photos/6841267340_855273fd7e_m.jpg" },
             { desc : "Young Lovers' Wall and the Old Rain", src : "../photos/6958456697_e56a37bb5f_m.jpg" },
             { desc : "These are the colors I love", src : "../photos/6791628438_affaa19e10_m.jpg" },
             { desc : "The Hope", src : "../photos/6916180091_9c9559e463_m.jpg" },
             { desc : "Florence streets. Florence people.", src : "../photos/6880502467_d4b3c4b2a8_m.jpg" },
             { desc : "I Love You", src : "../photos/6876412479_6268c6e2aa_m.jpg" },
             { desc : "The painter in Florence", src : "../photos/6840627709_92ed52fb41_m.jpg" },
             { desc : "Me and My Belover", src : "../photos/6812090617_5fd5bbdda0_m.jpg" },
             { desc : "Fiocco", src : "../photos/6806687375_07d2b7a1f9_m.jpg" },
             { desc : "My first clothespin", src : "../photos/6798453217_72dea2d06e_m.jpg" }
        ];

        var $gallery = $("#gallery"), textSignalEnabled = false;

        function addSomeImages(limit) {
            if (textSignalEnabled) {
                $gallery.append('<div style="width: 100px; height: 100px;">new series of images</div>');
            }
            for (var i = 0; i < limit; i++) {
                var imgIdx = Math.floor(Math.random() * availableImgs.length);
                $gallery.append('<a><img src="' + availableImgs[imgIdx].src + '" /></a>');
            }
            $gallery.justifiedGallery('norewind');
        }

        $gallery.justifiedGallery({
            rowHeight : 120
        });

        addSomeImages(10);
        $(window).scroll(function() {
            if($(window).scrollTop() + $(window).height() == $(document).height()) {
                addSomeImages(5);
            }
        });

        $('#enableDisableTextSignal').click(function () {
            textSignalEnabled = ~textSignalEnabled;
        });
    </script>
</body>

</html>
